/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  BlobInputList, CCell, Cell, Table, TableBody, TableHead, TableRow, Text,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {usePrefixDataTable} from "../../hook/usePrefixData";
import {useMeasureInpFilter} from "../../common/hooks";
import {FootMenRow} from "../../contain/rarelyVary";
import {SimpleImg} from "../../../comp/Image";
import Img_AUTSONI from "./AutSoni.png";
import {Each_ZdSetting, tabTextAreCb, useContentTableViewer, useTableEditor} from "../../hook/useRepTableEditor";
import {DirectLink} from "../../../routing/Link";

/**准备 公用的模板： @存储唯一性预留，多个可能模板集成 ？ @尽量避免碰见”超*“。
 * */
export const config超声波 = [
  [['检测仪器名称', '超仪器名',], ['操作指导书编号','超指导'] ],
  [['检测仪器型号/编号', '超仪器号',], ['检测方法/扫查面', '超测方法']],
  [['对比试块', '超比试',], ['检测比例', '超检测比']],
  [['检测标准', '超检标准',], ['检测时机', '超检时机']],
  [[{pr: '探头型号', span: 2, t: '横波周向'}, '超探横周' ], [{pr: '检测灵敏度', span: 2, t: '横波周向'}, '超灵横周']],
  [[{t: '横波轴向'}, '超探横轴'],   [{t: '横波轴向'}, '超灵横轴'] ],
  [['扫查面表面状况/扫查方式', '超表面扫',], ['耦合剂/耦合方式', '超耦合剂',]],
  [['补偿', '超补偿',], ['合格级别', '超合格级',]],
];
const config评波表 = [['气瓶编号', 'n', 130], ['缺陷位置', 'f', 140], ['缺陷指示长度(mm)', 'L', 110],
      ['缺陷反射波幅', 'B', 80], ['评定', 'r', 100], ['备注', 'm', 230, tabTextAreCb()]] as Each_ZdSetting[];
export const itemA超声波=['评波表', '超波结果' ];
export const AutoUltrasonicRes =
    React.forwardRef(({ children, show ,alone=true,refWidth,redId,nestMd,label}:InternalItemProps,  ref
    ) => {
      const [getInpFilter]=useMeasureInpFilter(null,itemA超声波, );
      const {inp, setInp} = useItemInputControl({ ref,redId,nestMd });
      const headview=<Text variant="h5">
          超声波检测结果及评定表。
      </Text>;
      const [render]=useTableEditor({inp, setInp,  headview,
              config: config评波表, table: '评波表',  maxRf:3 });
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                               nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">{label}:</Text>
            {render}
            <hr/>
            <Text id='AutoUltrasonicTail' variant="h5">全自动超声波检测-检测结果：</Text>
            <BlobInputList value={inp?.超波结果 || ''} rows={4} datalist={['合格。']}
                           onListChange={v => setInp({...inp, 超波结果: v || undefined})}/>
          </InspectRecordLayout>
      );
});
/**不会出现重复的分项，用这办法即可。
 * */
export const AutoUltrasonicVw = ({orc, rep, op}: { orc: any, rep: any, op?: boolean }
) => {
  const renderUpper = usePrefixDataTable({config: config超声波, orc, rep, slash: true});
  const [renderHead, renderRows] = useContentTableViewer(config评波表, orc?.评波表, true, true);
  return <>
    <div css={{"@media print": {paddingBottom: '4rem', pageBreakInside: 'avoid'}}}>
      <Text id='AutoUltrasonic' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>全自动超声波检测报告</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>{op?'记录':'报告'}编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["5.9%","11%","%","6.6%","8.3%","32%"] }
                  css={{borderCollapse: 'collapse',"@media print": {marginTop: '-4rem'} }} tight  miniw={800}>
      <TableBody>
        <RepLink rep={rep} tag={"AutoUltrasonic"}>
          {renderUpper}
          <TableRow><CCell colSpan={6}>
            <Text css={{fontSize:'0.75rem',display: 'flex'}}>检测部位示意图：</Text>
            <SimpleImg url={Img_AUTSONI} css={{
                    // width: '100%',maxWidth: '25rem'
            }}/>
          </CCell></TableRow>
        </RepLink>
      </TableBody>
    </Table>
    <Table fixed={ ["%"] } css={{borderCollapse: 'collapse', }} tight  miniw={800}>
      <TableHead>
        <TableRow><CCell>超声波检测结果及评定表</CCell></TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <CCell split css={{padding:0}}>
            <Table  fixed={ ["12%","25%","17%","12.2%","13%","%"]  }
                           css={ {borderCollapse: 'collapse', height:'fill-available'} } tight  miniw={800}>
              <TableHead>
                {renderHead}
              </TableHead>
              <TableBody>
                <RepLink rep={rep} tag={"AutoUltrasonicRes"}>
                  {renderRows}
                </RepLink>
              </TableBody>
            </Table>
          </CCell>
        </TableRow>
        <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/AutoUltrasonicRes?original=1#AutoUltrasonicTail`}>
          <TableRow>
            <Cell><div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>
              检测结果：<br/>
              {orc?.超波结果 || '／'}
            </div></Cell>
          </TableRow>
        </DirectLink>
      </TableBody>
        <FootMenRow span={1} orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </Table>
  </>;
};
